.anchor-highlight {
  animation: anchor-highlight-fade 2s ease forwards;

  --bg-anchor-highlight-base: rgb(250, 223, 90);
  :root.dark & {
    --bg-anchor-highlight-base: rgba(210, 188, 78, 0.95);
  }
}

/* Briefly highlight the element, then fade out. */
@keyframes anchor-highlight-fade {
  /* Extend box-shadow to cover the permalink (§). */
  0% {
    --bg: color-mix(
      in srgb,
      var(--bg-anchor-highlight-base) 95%,
      transparent 5%
    );
    background-color: var(--bg);
    box-shadow: 0 0 0.25em 0.5em var(--bg);
  }
  20% {
    --bg: color-mix(
      in srgb,
      var(--bg-anchor-highlight-base) 60%,
      transparent 40%
    );
    background-color: var(--bg);
    box-shadow: 0 0 0.25em 0.5em var(--bg);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}
